<template>
  <div class="type-container">
    <!-- 类别选择和新增区域 -->
    <div class="type-header">
      <div class="type-selector">
        <el-cascader
            v-model="value"
            :options="options"
            :props="props"
            @change="change"
            clearable
            placeholder="默认一级类别"
        ></el-cascader>
        <el-input
            v-model="type.typeName"
            placeholder="请输入类别名称"
            class="type-input"
        ></el-input>
        <el-button type="success" @click="add">新增类别</el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
              v-model="params.typeName"
              placeholder="请输入类别名称"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-select
              v-model="params.status"
              placeholder="请选择状态"
              class="status-select"
          >
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="启用" :value="0"></el-option>
            <el-option label="禁用" :value="2"></el-option>
            <el-option label="删除" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
          :data="list"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column
            prop="materialTypeId"
            label="类别编号"
            width="120"
        ></el-table-column>
        <el-table-column
            prop="typeName"
            label="废品类型"
            width="180"
        ></el-table-column>
        <el-table-column
            prop="parentId"
            label="父类编号"
            width="120"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template slot-scope="scope">
            <div class="operation-buttons">
              <el-button
                  type="warning"
                  size="mini"
                  v-if="scope.row.status === 0"
                  @click="disabled(scope.row.materialTypeId)"
              >禁用</el-button>
              <el-button
                  type="success"
                  size="mini"
                  v-if="scope.row.status === 2"
                  @click="enable(scope.row.materialTypeId)"
              >启用</el-button>
              <el-button
                  type="primary"
                  size="mini"
                  v-if="scope.row.status === 0"
                  @click="openPriceDialog(scope.row)"
              >定价</el-button>
              <el-button
                  type="danger"
                  size="mini"
                  v-if="scope.row.status !== 1"
                  @click="deleteType(scope.row.materialTypeId)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>

    <!-- 添加定价对话框 -->
    <el-dialog title="废品定价" :visible.sync="priceDialogVisible" width="30%">
      <el-form :model="priceForm" label-width="80px">
        <el-form-item label="类别名称">
          <span>{{ priceForm.typeName }}</span>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number 
            v-model="priceForm.price" 
            :precision="2" 
            :step="0.1" 
            :min="0"
            controls-position="right"
            placeholder="请输入价格">
          </el-input-number>
          <span class="unit">元/千克</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="priceDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPrice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Type',
  data() {
    return {
      loading: false,
      options: [],
      props: {
        checkStrictly: true,
        value: 'materialTypeId',
        label: 'typeName'
      },
      value: [0],
      type: {
        typeName: '',
        parentId: 0
      },
      materialTypeId: '',
      params: {
        typeName: '',
        parentId: '',
        status: -1,
        pageNum: 1,
        pageSize: 3
      },
      list: [],
      total: 0,
      priceDialogVisible: false,
      priceForm: {
        materialTypeId: '',
        typeName: '',
        price: 0
      }
    }
  },
  methods: {
    // 获取状态标签类型
    getStatusType(status) {
      const statusMap = {
        0: 'success',
        1: 'info',
        2: 'warning'
      }
      return statusMap[status] || 'info'
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '已启用',
        1: '已删除',
        2: '已禁用'
      }
      return statusMap[status] || '未知状态'
    },
    // 查询列表
    async select() {
      this.loading = true
      try {
        const resp = await this.$http.post('recycle/materialType/selectType', this.params)
        this.list = resp.data.data.records
        this.total = resp.data.data.total
      } catch (error) {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.params.pageSize = val
      this.select()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.select()
    },
    // 搜索
    search() {
      this.params.pageNum = 1
      this.select()
    },
    // 禁用
    async disabled(typeId) {
      try {
        const form = new FormData()
        form.append('materialTypeId', typeId)
        const resp = await this.$http.post('recycle/materialType/disable', form)
        if (resp.data.code === 200) {
          this.select()
          this.$message.success(resp.data.message)
        } else {
          this.$message.error(resp.data.message)
        }
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 启用
    async enable(typeId) {
      try {
        const form = new FormData()
        form.append('materialTypeId', typeId)
        const resp = await this.$http.post('recycle/materialType/enable', form)
        if (resp.data.code === 200) {
          this.select()
          this.$message.success(resp.data.message)
        } else {
          this.$message.error(resp.data.message)
        }
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 删除
    async deleteType(typeId) {
      try {
        const form = new FormData()
        form.append('materialTypeId', typeId)
        const resp = await this.$http.post('recycle/materialType/delete', form)
        if (resp.data.code === 200) {
          this.select()
          this.$message.success(resp.data.message)
        } else {
          this.$message.error(resp.data.message)
        }
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 加载类型树
    async loadType() {
      try {
        const resp = await this.$http.post('recycle/materialType/selectTypeTree')
        this.options = resp.data.data
        this.options.unshift({
          materialTypeId: 0,
          typeName: '顶级类别',
          children: []
        })
      } catch (error) {
        this.$message.error('加载类型失败')
      }
    },
    // 级联选择器改变
    change() {
      this.type.parentId = this.value[this.value.length - 1] !== undefined
          ? this.value[this.value.length - 1]
          : 0
    },
    // 新增类型
    async add() {
      try {
        const resp = await this.$http.post('recycle/materialType/addType', this.type)
        if (resp.data.code === 200) {
          this.loadType()
          this.type.typeName = ''
          this.$message.success('添加成功')
          this.select()
        } else {
          this.$message.error(resp.data.message)
        }
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // 打开定价对话框
    openPriceDialog(row) {
      this.priceForm.materialTypeId = row.materialTypeId
      this.priceForm.typeName = row.typeName
      this.priceForm.price = 0
      this.priceDialogVisible = true
    },
    // 提交价格
    async submitPrice() {
      try {
        if (this.priceForm.price <= 0) {
          this.$message.warning('请输入有效价格')
          return
        }
        
        const resp = await this.$http.post('recycle/wastePricing/wasteStationPrice', {
          materialTypeId: this.priceForm.materialTypeId,
          price: this.priceForm.price
        })
        
        if (resp.data.code === 200) {
          this.$message.success('定价成功')
          this.priceDialogVisible = false
        } else {
          this.$message.error(resp.data.message || '定价失败')
        }
      } catch (error) {
        this.$message.error('定价操作失败')
      }
    }
  },
  created() {
    this.loadType()
    this.select()
  }
}
</script>

<style lang="less" scoped>
.type-container {
  padding: 20px;

  .type-header {
    margin-bottom: 20px;

    .type-selector {
      display: flex;
      align-items: center;
      gap: 15px;

      .type-input {
        width: 200px;
      }
    }
  }

  .search-area {
    margin-bottom: 20px;

    .status-select {
      width: 100%;
    }
  }

  .table-container {
    margin-bottom: 20px;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .operation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style>